<template>
  <!-- 策略商城详情 -->
  <view>
    <!-- 自定义导航栏开始 -->
    <u-navbar title-color="#ffffff" :background="background" title="策略详情" back-icon-color="#FFFFFF" is-fixed
      :border-bottom="borderbottom">
      <text slot="right" class="fenxiang">分享</text>
    </u-navbar>
    <!-- 自定义导航栏结束 -->
    <!-- 内容上部分开始 -->
    <view class="detail-top">
      <view class="top-title">
        <view class="">
          <text>海浪网格(金本位)</text>
          <text class="bibi">币币</text>
        </view>
        <text class="shengyu">剩余可售237单</text>
      </view>
      <view class="bianma">策略编码：V2X7GY</view>
      <view class="bianma">适用于震荡行情</view>
      <view class="cont-bottom">
        <view class="">
          <view class="leiji">66545BTC</view>
          <text>累计投入</text>
        </view>
        <view class="shuxian"></view>
        <view class="">
          <view class="leiji">65BTC</view>
          <text>累计收益</text>
        </view>
        <view class="shuxian"></view>
        <view class="">
          <view class="leiji yuqi">47984565465646.56%</view>
          <text>预期年化</text>
        </view>
      </view>
    </view>
    <!-- 内容上部分结束 -->
    <!-- 内容下部分介绍，概况开始 -->
    <view class="jieshao">
      <view>
        <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
          bg-color="#121d3b" inactive-color="#aab5d1" active-color="#FFFFFF" swiperWidth="750"></u-tabs-swiper>
      </view>
      <swiper :current="swiperCurrent" style="height: 100vh;" @transition="transition"
        @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
            <!-- 介绍里的内容 -->
            <view class="jieshao-title">策略介绍</view>
            <text class="jieshao-con">适用于震荡行情</text>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
            <!-- 概况 -->
            <view class="gaikuang">概况</view>
            <view class="gaikuang-list">
              <view class="text-count">API数量</view>
              <view class="text-num">1个 </view>
            </view>
            <view class="gaikuang-list">
              <view class="text-count">API数量</view>
              <view class="text-num">1个 </view>
            </view>
            <!-- 账户1 -->
            <view class="gaikuang">账户1</view>
            <view class="gaikuang-list">
              <view class="text-count">API数量</view>
              <view class="text-num">1个17:43:01.874 </view>
            </view>
            <!-- 参数 -->
            <view class="gaikuang">参数</view>
            <view class="gaikuang-list">
              <view class="text-count">API数量</view>
              <view class="text-num">1个17:43:01.874 </view>
            </view>
            <view class="gaikuang">版本</view>
            <view class="banben-v">
              <text>版本1.0</text>
              <text>策略发布</text>
              <text>2012/12/23</text>
            </view>
            <view class="banben-v">
              <text>版本1.0</text>
              <text>策略发布</text>
              <text>2012/12/23</text>
            </view>
            <!-- 官方提示 -->
            <view class="tishi">
              <view class="tishi-title">官方提示</view>
              <view class="">
                <view class="">
                  策略商城提供第三方的策略展示和购买，请您确认在购买前已充分理
                  解‘买卖自负’的市场原则，充分认识到策略交易潜在的交易风险，自
                  行承担交易结果。
                </view>
                <view class="">
                  任何由于购买的量化策略带来资金缩水或损失风险，Vtrading不担负任
                  何责任，请您谨慎选择，合理投资。
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 内容下部分介绍，概况结束 -->
    <!-- 底部盒子 -->
    <view class="bottombox">
      <view class="">
        <text class="one">1</text><text class="two">VTN/月</text><text class="three">含体现权益</text>
      </view>
      <view class="goumai-btns">
        <button type="primary" size="mini">免费30天</button>
        <button class="goumai-btn" type="default" size="mini" plain>立即购买</button>
      </view>
    </view>
    <!-- 底部盒子 结束-->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        borderbottom: false, // 是否显示自定义导航栏下边框
        background: {
          backgroundColor: '#121d3a'
        },
        list: [{
          name: '介绍'
        }, {
          name: '概况'
        }],
        // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
        current: 0, // tabs组件的current值，表示当前活动的tab选项
        swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

      }
    },
    methods: {
      // tabs通知swiper切换
      tabsChange(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx;
        this.$refs.uTabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current;
        this.$refs.uTabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },
      // scroll-view到底部加载更多
      onreachBottom() {

      }
    }
  }
</script>

<style>
  page {
    background-color: #091430;
  }

  .fenxiang {
    color: #FFFFFF;
    margin-right: 30rpx;
  }

  .bottombox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 160rpx;
    background-color: #121d39;
    color: #aab5d1;
    padding: 0 20rpx;
  }

  .goumai-btns uni-button:nth-child(2) {
    color: #007AFF;
    border: 0;
  }

  .one {
    font-size: 38rpx;
    margin-right: 10rpx;
  }

  .two {
    font-size: 32rpx;
  }

  .three {
    font-size: 22rpx;
  }

  .detail-top {
    margin: 20rpx 0;
    padding: 30rpx;
    height: 320rpx;
    background-color: #121d3b;
    font-size: 30rpx;
  }

  .top-title {
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
  }

  .bibi {
    font-size: 22rpx;
    color: #007AFF;
    margin-left: 20rpx;
    padding: 4rpx 10rpx;
    background-color: #112546;
    border-radius: 10rpx;
  }

  .shengyu {
    font-size: 22rpx;
  }

  .bianma {
    color: #aab5d1;
    font-size: 22rpx;
    margin: 15rpx 0;
  }

  .cont-bottom {
    display: flex;
    justify-content: space-around;
    text-align: center;
    color: #aab5d1;
    margin-top: 40rpx;
    font-size: 22rpx;
  }

  .leiji {
    color: #FFFFFF;
    font-size: 28rpx;
    margin-bottom: 10rpx;
  }

  .yuqi {
    color: #08B195;
  }

  .shuxian {
    width: 2rpx;
    background-color: #1c2745;
  }

  /* 介绍概况样式 */
  .jieshao {
    background-color: #121d3b;
    padding: 20rpx;

  }

  .jieshao-title {
    color: #FFFFFF;
    font-size: 30rpx;
    margin-bottom: 10rpx;
    margin-top: 30rpx;
  }

  .jieshao-con {
    color: #aab5d1;
    font-size: 24rpx;
  }

  .gaikuang {
    font-size: 28rpx;
    color: #FFFFFF;
    margin: 20rpx 0;
  }

  .gaikuang-list {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    border: 1px solid #1b2644;
  }

  .text-count {
    color: #aab5d1;
    height: 100%;
    width: 40%;
    padding: 8rpx 10rpx;
  }

  .text-num {
    width: 60%;
    color: #FFFFFF;
    padding: 8rpx 10rpx;
    border-left: 2rpx solid #1b2644;
  }
 .banben-v{
   display: flex;
   justify-content: space-between;
   height: 60rpx;
   line-height: 60rpx;
   border-top: 1px solid #1b2644;
   color: #FFFFFF;
   font-size: 26rpx;
 }
 .tishi{
   font-size: 22rpx;
   color: #aab5d1;
 }
 .tishi-title{
   font-size: 28rpx;
   color: #FFFFFF;
   margin: 40rpx 0 20rpx 0;
 }
</style>
